<template>
  <div class="app-container">
    <div class="demo-input-size" style="margin-bottom: 4px;">
      <el-input  style="width: 10%" placeholder="请输入客户手机"  v-model="seachData.mobile" />
      <span>第一通</span><el-select v-model="seachData.seatName" @change="selectUserChange" placeholder="请选择第一通的名字">
        <el-option v-for="s in selectUserList" :key="s.id" :lable="s.id" :value="s.name"></el-option>
      </el-select>
      <el-date-picker  v-model="seachData.follupTime" placeholder="请输入创建日期"  type="date"  value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-button type="primary" size="mini" @click="search()">查询</el-button>
      <el-button type="primary" size="mini" @click="resetForm()">重置</el-button>

    </div>

    
    <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>

      <el-table-column label="客户名称"  width="120">
        <template slot-scope="scope">
          {{scope.row.custName}}
        </template>
      </el-table-column>
      <el-table-column label="客户电话"  width="120">
        <template slot-scope="scope">
          <span>{{scope.row.mobile}}</span>
        </template>
      </el-table-column>
      <el-table-column label="预约时间"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.follupTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="预约备注"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.notes}}</span>
        </template>
      </el-table-column>
      <el-table-column label="第二通销售姓名"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.twoSeatName}}</span>
        </template>
      </el-table-column>

      <el-table-column label="二通状态"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.twoStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划跟进时间"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.twoFollupTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row, 'edit')">编辑</el-button>
        </template>
      </el-table-column>

      <el-table-column label="第一通销售姓名"  width="140">
        <template slot-scope="scope">
          <span>{{scope.row.seatName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="第一通拨打时间"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.seatTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="预约状态"  width="80">
        <template slot-scope="scope">
          <span>{{scope.row.status}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作记录"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.operaRecord}}</span>
        </template>
      </el-table-column>
      <el-table-column label="第二通对应人"  width="140">
        <template slot-scope="scope">
          <span>{{scope.row.nextSeatName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="第二通拨打时间"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.twoSeatTime}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作记录"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.twoOperaRecord}}</span>
        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 4px;">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="pageTotal"
        @current-change="pageChange">
      </el-pagination>
    </div>

    <!--新增添加客户窗口-->
    <el-dialog :title="dialogFormTitle" :show-close="false" :close-on-press-escape="false"
               :close-on-click-modal="false" :visible.sync="infoVisible">
      <el-form :model="infoForm">
        <el-form-item label="客户姓名" :label-width="formLabelWidth">
          <el-input v-model="infoForm.custName" style="width:180px;"></el-input>
          <label>客户电话</label>
          <el-input v-model="infoForm.mobile" style="width:180px;"></el-input>
        </el-form-item>

        <el-form-item label="第一通销售姓名" :label-width="formLabelWidth">
          <el-input v-model="infoForm.seatName" :disabled="true" id="seatName" style="width:180px;"></el-input>
          <label>第一通拨打时间</label>
          <el-input v-model="infoForm.callTime" :disabled="true" style="width: 180px;"></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="infoForm.status" placeholder="请选择" >
            <el-option label="意愿" value="0" key="0">
              <span style="float: left">意愿</span>
              <span style="float: right; color: #8492a6; font-size: 13px">0</span>
            </el-option>
            <el-option label="预约" value="1" key="1">
              <span style="float: left">预约</span>
              <span style="float: right; color: #8492a6; font-size: 13px">1</span>
            </el-option>
          </el-select>
          <label>预约时间</label>
          <el-date-picker
            v-model="infoForm.follupTime"
            placeholder="请输入预约日期"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="第二通对应人" :label-width="formLabelWidth">
          <!-- <el-input v-model="infoForm.nextSeatName"></el-input>-->
          <el-select v-model="infoForm.nextSeatName" @change="selectUserChange" placeholder="请选择坐席">
            <el-option v-for="t in appoints" :key="t.id" :lable="t.id" :value="t.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="infoForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit('custInfo')">取 消</el-button>
        <el-button type="primary" @click="submit('custInfo')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改弹窗-->
    <el-dialog :title="dialogFormTitle" :show-close="false" :close-on-press-escape="false"
               :close-on-click-modal="false" :visible.sync="editVisible">
      <el-form :model="infoForm">
        <el-form-item label="客户姓名" :label-width="formLabelWidth">
          <el-input v-model="infoForm.custName" :disabled="true" style="width:200px;"></el-input>
          <label>客户电话</label>
          <el-input v-model="infoForm.mobile" :disabled="true" style="width:180px;"></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="infoForm.status" placeholder="请选择" :disabled="twoFlag">
            <el-option label="意愿" value="0" key="0">
              <span style="float: left">意愿</span>
              <span style="float: right; color: #8492a6; font-size: 13px">0</span>
            </el-option>
            <el-option label="预约" value="1" key="1">
              <span style="float: left">预约</span>
              <span style="float: right; color: #8492a6; font-size: 13px">1</span>
            </el-option>
          </el-select>
          <label>预约时间</label>
          <el-input v-model="infoForm.follupTime" :disabled="twoFlag" style="width: 180px;"></el-input>
        </el-form-item>
        <el-form-item label="第二通对应人" :label-width="formLabelWidth">
          <el-select v-model="infoForm.nextSeatName" :disabled="twoFlag" @change="selectUserChange" placeholder="请选择坐席">
            <el-option v-for="t1 in selectUserList" :key="t1.id" :lable="t1.id" :value="t1.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="infoForm.notes" :disabled="twoFlag"></el-input>
        </el-form-item>
        <el-form-item>
          <div>
            <span class="el-dialog__title">指派</span>
          </div>
        </el-form-item>
        <el-form-item label="第二通销售姓名" :label-width="formLabelWidth">
          <el-select v-model="infoForm.twoSeatName" @change="selectUserChange" placeholder="请选择坐席">
            <el-option v-for="t2 in selectUserList" :key="t2.id" :lable="t2.id" :value="t2.name"></el-option>
          </el-select>
          <!-- <label>选择日期</label>
           <el-radio-group v-model="day"  v-for="item in days" :key="item.id">
             <el-radio :label="item.name" :key="item.name" @change="selectUserChange(item.name)">{{ item.name }}</el-radio>
           </el-radio-group>-->
        </el-form-item>
        <el-form-item label="第二通拨打时间" :label-width="formLabelWidth" >
          <el-input v-model="infoForm.twoSeatTime" style="width:200px;"></el-input>
          <label>计划跟进时间</label>
          <el-input v-model="infoForm.twoFollupTime" style="width: 170px"></el-input>
          <el-select v-model="day" @change="selectUserChange" placeholder="请选择日期" style="width: 130px">
            <el-option v-for="t3 in days" :key="t3.id" :lable="t3.id" :value="t3.name"></el-option>
          </el-select>
          <!-- <label>选择时段</label>-->
          <el-select v-model="time" @change="selectUserChange" placeholder="请选择时间" style="width: 100px">
            <el-option v-for="t3 in times" :key="t3.id" :lable="t3.id" :value="t3.name"></el-option>
          </el-select>
          <!--<el-radio-group v-model="time"  v-for="item1 in times" :key="item1.id">
            <el-radio :label="item1.name" :key="item1.name" @change="selectUserChange(item1.name)">{{ item1.name }}</el-radio>
          </el-radio-group>-->
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="infoForm.twoStatus" @change="selectUserChange" placeholder="请选择状态" >
            <el-option v-for="t3 in twoStatus" :key="t3.id" :lable="t3.id" :value="t3.name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="infoForm.remark" ></el-input>
        </el-form-item>
        <!-- <el-form-item label="操作记录" :label-width="formLabelWidth">
           <el-input v-model="infoForm.twoOperaRecord" :disabled="!twoFlag"></el-input>
         </el-form-item>-->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit('custEdit')">取 消</el-button>
        <el-button type="primary" @click="submit('custEdit')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { callApi } from '@/api/calltrack'

  export default {
    data() {
      return {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页数
        pageTotal: 0, // 总页数
        list: null,
        date:'',
        details:'',
        seachData:{
          mobile:'',
          seatName:'',
          callTime:'',
          nextName:''
        },
        btn:false,
        listLoading: true,
        dialogFormVisible: false,
        dialogFormTitle: '',
        formLabelWidth: '120px',
        form: {},
        defaultName:sessionStorage.getItem("user").toString(),
        infoVisible:false,
        editVisible:false,
        appoints:[],
        nameArr: '曾欢,余秋蓉,梁烨,郑梦仙,谢俊英,吴曼盈,林谋,徐帝勇,邹绮婷,杨旭漫,方国,彭晓祯,梁善涌,匡芷若,赵春香,詹雄',
        selectUserList:[],
        selectNames:[],
        twoFlag:false,
        statustArr:'意愿,再跟进,未接电话,拒接,不需要,过期,太贵,报价考虑,意愿再跟进,未接/拒再跟进,确实不需要,嫌贵不需要,成交',
        twoStatus:[],
        day:'',
        days:[],
        times:[],
        time:'',
        infoForm:{},
      }
    },
    filters: {
    },
    created() {
      this.fetchData()
      this.initSelect()
      // 设置1分钟秒自动刷新
      // this.timer()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        this.seachData.seatName= !this.btn?this.defaultName:callApi.isNull(this.seachData.seatName);
        callApi.getUnNeeedList(this.pageNum,this.pageSize,this.seachData).then(response => {
          this.list = response.list
          this.listLoading = false
          this.pageTotal = response.total
          this.pageNum = response.pageNum
        })
      },
      timer(){
        setInterval(this.fetchData, 60000);
      },
      initSelect(){
        this.getSelectList(this.nameArr,this.selectUserList);
        this.getSelectList(this.statustArr,this.twoStatus);
      },
      getSelectList(name,obj){
        let arr = name.split(",")
        arr.forEach((n, index) => {//关键的是将后台返回的数据进行遍历，并封装好
          obj.push({
            id: index,//id必须品啊
            name: n//name必须品啊
          });
        });
      },
      // 获取请求路径
      getUrl() {
        let baseurl = ''
        if (this.$el.baseURI.indexOf('localhost') != -1) {
          baseurl = 'http://localhost:8888/yb'
        }else if (this.$el.baseURI.indexOf('127.0.0.1') != -1) {
          baseurl = 'http://127.0.0.1:8888/yb'
        }else if (this.$el.baseURI.indexOf('tyb') != -1) {
          baseurl = 'https://tyb.xiaonatech.com/yb'
        } else {
          baseurl = 'https://mall.huiyanbao.com/yb'
        }
        return baseurl
      },
      search(){
        this.btn = true;
        let laod = true;
        for(var i in this.seachData) {
          if(callApi.isNull(this.seachData[i])==""){
            laod = false;
          } else {
            laod = true;
            break;
          }
        }
        if(!laod){
          this.seachData.seatName = this.defaultName
          // this.warnMsg("请填写查询条件再查询");
        }
        this.fetchData();
      },
      resetForm(){
        this.seachData = {}
      },
      expotData(){
        callApi.expotData(this.getUrl(),this.date).then(response => {
          console.log(response);
        })
      },
      pageChange(val) {
        this.pageNum = val
        if (this.date == '') {
          this.fetchData();
        } else {//带条件翻页
          this.search();
        }
      },
      selectUserChange(val){
        if(this.time==undefined || this.time==""){
          this.infoForm.twoFollupTime = this.day + " 00:00:00";
        } else {
          this.infoForm.twoFollupTime = this.day + " "+this.time+":00";
        }
      },
      /*打开新增窗口*/
      addCust(){
        let name = ''
        callApi.getCallUser(this.defaultName).then(response => {
          if(response.data!=null){
            this.getSelectList(response.data,this.appoints);
            name = response.data.split(",")[0];
          } else {
            name= '曾欢'
            this.getSelectList('曾欢',this.appoints);
          }
          this.infoForm = {seatName:this.defaultName,nextSeatName:name,callTime:new Date().Format("yyyy-MM-dd hh:mm:ss"),status : '预约'};
        })
        this.dialogFormTitle = '新增客户：';
        this.infoVisible = true;
      },
      handleEdit(index, row, type) {
        if(type=="edit"){
          this.editVisible = true;
          this.dialogFormTitle = '修改';
          if(this.defaultName == row.seatName){
            this.twoFlag = false;
          } else {
            this.twoFlag = true;
          }
          this.days = [];this.times = [];this.day='';this.time=''
          let arr = new Date().Format("yyyy-MM-dd")+","+callApi.addDate(new Date(),1)+","+callApi.addDate(new Date(),2);
          this.getSelectList(arr,this.days);
          arr = '10:00,11:00,14:00,15:00,16:00';
          this.getSelectList(arr,this.times)
          this.infoForm = {custName:row.custName,mobile:row.mobile,status: row.status,follupTime:row.follupTime,notes:row.notes,nextSeatName:row.nextSeatName,
            twoSeatName:row.twoSeatName,twoSeatTime:new Date().Format("yyyy-MM-dd hh:mm:ss"),twoStatus:row.twoStatus=='null'?'':row.twoStatus};
          this.infoForm.twoFollupTime = this.days[1].name +" "+this.times[0].name+":00"
        }
      },
      cancelSubmit(type) {
        if(type=='custInfo'){
          this.infoVisible = false;
          this.appoints = [];
          this.fetchData()
        } else {
          this.editVisible = false;
        }
      },
      /*提交*/
      submit(type) {
        if (type == 'custInfo') {
          this.infoForm.status= this.infoForm.status=='0'?"意愿":"预约";
          this.infoForm.remark = callApi.isNull(this.infoForm.remark)
          callApi.save(this.infoForm).then(response => {
            if(response.status=="200");{
              this.infoVisible = false;
              this.fetchData()
              this.appoints = [];
            }
          })
        } else {
          this.infoForm.seatName = this.defaultName;
          this.infoForm.twoOperaRecord = callApi.isNull(this.infoForm.twoOperaRecord)
          this.infoForm.twoStatus = callApi.isNull(this.infoForm.twoStatus)
          this.infoForm.notes = callApi.isNull(this.infoForm.notes)
          callApi.update(this.infoForm).then(response => {
            if(response.status=="200");{
              this.editVisible = false;
              this.fetchData()
            }
          })
        }
      },
      warnMsg(msg){
        this.$message({
          message: msg,
          type: 'warning'
        });
      }
    }
  }
</script>
